<template>
    <block v-if="scene == 1154">
        <pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="pages bg-fff">
            <view class="topCardWrap bg-theme col-fff top-15">
                <view class="taxQrcodeWrap flex">
                    <view class="taxTotalWrap font12">
                        需缴纳税费
                        <view class="top-10">
                            <text class="font25 fontBold fontNum">{{totalMoney}}</text><text class="left-5">元</text>
                        </view>
                    </view>
                </view>
                <view class="priceRowWrap flex text-center">
                    <view class="amountItem rowItem font12">
                        <view class="font14"><text class="">{{ sellAmount }}</text>万元</view>
                        <view class="font12">房屋总价</view>
                    </view>

                    <view class="priceItem rowItem font12">
                        <view class="font14"><text class="">{{ sellPrice }}</text>元/m²</view>
                        <view class="font12">房屋单价</view>
                    </view>

                    <view class="sizeItem rowItem font12">
                        <view class="font14"><text class="">{{ houseSize }}</text>m²</view>
                        <view class="font12">房屋面积</view>
                    </view>
                </view>

                <image class="leftIcon linkIcon" src="https://image.srea.org.cn/xcx/icon/tax-query-link-icon.png" mode="widthFix"></image>
                <image class="rightIcon linkIcon" src="https://image.srea.org.cn/xcx/icon/tax-query-link-icon.png" mode="widthFix"></image>
            </view>

            <view class="detailWrap bg-theme-opacity">
                <view class="detailHead">
                    <view class="titltWrap text-center fontBold font14">税费明细</view>
                </view>

                <view class="centerRowWrap bg-fff font14">
                    <view class="taxRowItem flex">
                        <text>契税</text>
                        <text>约{{ qishui }}元</text>
                    </view>

                    <block v-if="houseType === 'new'">
                        <view class="taxRowItem flex">
                            <text>权证印花税</text>
                            <text>约5元</text>
                        </view>

                        <view class="taxRowItem flex">
                            <text>住宅专享维修基金</text>
                            <text>约{{ wxjjMoney }}元</text>
                        </view>
                    </block>

                    <block v-if="houseType === 'second'">
                        <view class="taxRowItem flex">
                            <text>增值税</text>
                            <text>约{{ zengTaxes }}元</text>
                        </view>

                        <view class="taxRowItem flex">
                            <text>个人所得税</text>
                            <text>约{{ geRenTaxes }}元</text>
                        </view>
                    </block>
                </view>

                <view class="BottomRowWrap top-10 left-10 font11">
                    <view class="bottomRow flex">
                        <view class="leftRow">购房性质：{{ isFirst?'首':'非首' }}套房</view>
                        <view class="rightRow">房屋单价: {{ sellPrice }}元/m²</view>
                    </view>

                    <view class="bottomRow flex top-10">
                        <view class="leftRow" v-if="houseType === 'second'">在沪唯一住宅：{{ isOnlyOne?'是':'否' }}</view>
                        <view class="leftRow" v-if="houseType === 'new'">有无电梯：{{ hasLift?'有':'无' }}</view>
                        <view class="rightRow">房屋面积: {{ houseSize }}/m²</view>
                    </view>
                </view>
            </view>

            <view class="font10 top-10 left-10">*税费计算结果仅供参考，请以实际缴纳金额为准。</view>
        </view>
    </block>
</template>

<script>
import { mapState } from 'pinia';
import { useUserInfoStore, useConfigStore } from '@/store/index';
import { isBoolean } from '@/common/common';
export default {
    data() {
        return {
            houseType: 'new',
            qishui: 0,
            wxjjMoney: 0,
            zengTaxes: 0,
            geRenTaxes: 0,
            houseSize: 0,
            buyAmount: 0,
            sellAmount: 0,
            sellPrice: 0,
            isFirst: true,
            hasLift: true,
            isOnlyOne: true,
        }
    },
    computed: {
        ...mapState(useConfigStore, ['scene']),
        ...mapState(useUserInfoStore, ['userInfo']),
        totalMoney: function () {
            const newHouseAmount = Number(this.qishui) + Number(this.wxjjMoney) + 5;
            const secHouseAmount = Number(this.qishui) + Number(this.zengTaxes) + Number(this.geRenTaxes)
            return this.houseType === 'new' ? parseFloat(newHouseAmount.toFixed(2)) : parseFloat(secHouseAmount.toFixed(2))
        }
    },
    onShareAppMessage(res) {
        return {
            title: `税费计算器，点击查看详情`,
            path: `/pages/menus/tools/calculator/tax-query?puid=${this.userInfo.id}`,
        }
    },
    onShareTimeline() {
        return {
            title: `税费计算器，点击查看详情`,
            query: `puid=${this.userInfo.id}`
        }
    },
    onLoad(options) {
        let { size=0, buyAmount=0, sellAmount=0, sellPrice=0, isFirst=true, hasLift=true, isOnlyOne=true, houseType='new', qishui, wxjjMoney, zengTaxes = 0, geRenTaxes = 0 } = options;
        //朋友圈进入小程序快照场景
        if (this.scene == 1154) return;

        this.houseSize = size;
        this.buyAmount = buyAmount;
        this.sellAmount = sellAmount;
        this.sellPrice = sellPrice;
        this.houseType = houseType;
        this.isFirst = isBoolean(isFirst);
        this.hasLift = isBoolean(hasLift);
        this.isOnlyOne = isBoolean(isOnlyOne);
        this.qishui = qishui;
        this.wxjjMoney = wxjjMoney;
        this.zengTaxes = zengTaxes;
        this.geRenTaxes = geRenTaxes;
        uni.$check_and_login()
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.pages {
    min-height: 100vh;
    position: relative;
    padding: 0 28rpx;
    overflow: hidden;

    .topCardWrap {
        position: relative;
        border-radius: 10rpx;

        .taxQrcodeWrap {
            justify-content: space-between;
            padding: 50rpx 30rpx 50rpx 35rpx;
        }

        .priceRowWrap {
            margin: 0 10rpx;
            padding: 15rpx 0 20rpx 0;
            border-top: 1rpx solid #FFFFFF;
            justify-content: space-between;
            align-items: stretch;

            .rowItem {
                width: calc(33.3% - 1rpx);
                padding: 20rpx 0 14rpx 0;
                border-right: 1rpx solid #FFFFFF;

                &:last-child {
                    border: none;
                }
            }
        }

        .linkIcon {
            width: 16rpx;
            position: absolute;
            bottom: -70rpx;
            z-index: 10;
        }

        .leftIcon {
            left: 10rpx;
        }

        .rightIcon {
            right: 10rpx;
        }
    }

    .detailWrap {
        margin-top: 36rpx;
        border-radius: 10rpx;
        padding: 86rpx 28rpx 28rpx 28rpx;
        position: relative;

        .detailHead {
            width: 288rpx;
            height: 76rpx;
            position: absolute;
            top: 0;
            left: calc(50% - 144rpx);
            z-index: 10;

            .titltWrap {
                padding-top: 14rpx;
            }
        }

        .centerRowWrap {
            padding: 10rpx 28rpx;
            border-radius: 10rpx;

            .taxRowItem {
                padding: 10rpx 0;
                justify-content: space-between;
                border-bottom: 1rpx solid rgba(0, 0, 0, .1);

                &:last-child {
                    border: none;
                }
            }
        }

        .BottomRowWrap {
            .bottomRow {
                justify-content: space-between;

                .leftRow {
                    width: 60%;
                }

                .rightRow {
                    width: 40%;
                }
            }
        }
    }
}
</style>
